<template>
  <div>
  	<!--<modal v-show="erweima" @close_modal="erweima=false">
  		<div class="ballot_result">
  			<svg id ='barcode2'></svg>
  		</div>
  	</modal>-->
  	<div class="banner"></div>
  	<div>
  			<div class="content">
  		<div class="coupon">
  			<div>{{param.mchtName}}</div>
  			<hr />
  			<div>
  				<div class="couponDiv">
                    <coupon-denomination :item="param"></coupon-denomination>
                </div>
                <div class="couponMess">
                	<p>{{param.couponName}}</p>
                	<p>已售出：{{param.soldnum}}</p>
                	<p>已使用：{{param.usednum}}</p>
                </div>

                  
  			</div>
  		</div>
  		<img src="../../images/cardBg_04.png"/>

  	</div>
			

	<!--轮播-->
			 <div class="swiperCon" style="min-height:18rem;">
        <mt-swipe style='min-height: 18rem;background: white;' :show-indicators="false" :auto="0" :continuous="false" @change="handleChange">
          <mt-swipe-item v-for="(item,index) in swiperArr" :key='index'>
         <div class="code">
  		<div id="card"><span>您的兑换码</span><span v-if="lastCoupon" style="float: right;margin-right: 2rem;font-size: .9rem;color: #666666;"><--左滑查看更多</span></div>
  		<div id="scratch">
  			<div class="copyTxt">{{item.thirdNo | shiwei}}</div>
  			<div :id="num === index?'ss': 'ssss'">{{item.thirdNo}}</div>
  			<div class="btns" @click="copy(item)" data-clipboard-target="#ss" data-clipboard-action="copy">{{item.thirdType=='url'?'复制使用':'复制'}}</div>
  			<div class="fuzhiTxt">（复制兑换码至第三方商家平台使用）</div>
  		</div>
  		<div id="scratch" v-if="item.couPwd!=''">
  			<div class="copyTxt">{{item.couPwd | shiwei}}</div>
  			<div id="sss">{{item.couPwd}}</div>
  			<div class="btns" @click="copy" data-clipboard-target="#sss" data-clipboard-action="copy">复制</div>
  			<div class="fuzhiTxt">（复制此密码至第三方商家平台使用）</div>
  		</div>
  		<hr />

 	</div>
          </mt-swipe-item>
        </mt-swipe>
      </div>
			  		<div class="useGuize" :class="{'aaaa':param.couPwd==''}" v-if="bottomthirdDesc">
  				<div>使用规则：</div>
  				<div>
  					<ul>
  						<li v-for="i in thirdDescArr">{{i}}</li>
  					</ul>
  				</div>
  		</div>
			
  	</div>
    	<modal v-if="thirdDescArrState">
    	<div class="model">
    		<div class="modalTxt">使用须知</div>
    		<div>
    			<ul class="modalUl">
    				<li v-for="item in thirdDescArr">{{item}}</li>
    			</ul>
    		</div>
    		<div class="modalBtn" @click="thirdDescArrState=false">确定</div>
    	</div>
    </modal>
  </div>
</template>
<script>import * as types from '../../vuex/types.js'
import getData from '../../service/getData.js'
import { mapState } from 'vuex'
import { Storage } from 'src/utils/storage.js'
import { Toast, MessageBox } from 'mint-ui'
var JsBarcode = require('jsbarcode');

//var pic1 = require('../../images/thirdCanvas2.png')
//var pic2 = require('../../images/thirdCanvas.png')
export default {
	data() {
		return {
			param: '',
			shareInfo1: false,
			usrAmt: 0,
			thirdNo:0,
			erweima:false,
			copyState:true,
			thirdDescArr:[],
			thirdUrlState:'',
			thirdUrlDesc:'',
			swiperArr:[],
			num:0,
			lastCoupon:false,//轮播是否在最后第一券
			thirdDescArrState:false,//弹窗使用须知
			bottomthirdDesc:false
		}
	},
	created: function() {
		this.thirdUrlState= this.$route.query.thirdUrlState
		this.thirdUrlDesc= this.$route.query.thirdUrlDesc
		this.getJsBarcode (); //动态导入刮卡插件
		 let me=this
			 getData.getThirdDesc({method:'post',data:{mchtId:me.$route.query.mchtId,couponId:me.$route.query.couponId,usrId:me.userInfo.usrId}}).then(function(rep){
			 		 	me.param=rep.content.result[0]
			 		 	me.swiperArr=rep.content.result
			 		 	if(rep.content.result[0].thirdType!=='url'){
			 			me.thirdDescArrState=true
			 			me.bottomthirdDesc=true
						 }else{
						 			me.thirdUrlState=false
						 }
			 		 	me.thirdDescArr=rep.content.result[0].thirdDesc.split('；')
			 		 	if(rep.content.result.length>1){
			 		 		me.lastCoupon=true
			 		 	}
			 })

	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	methods: {
		handleChange(index){
			if(this.swiperArr.length==(index+1)){
				this.lastCoupon=false
			}else{
				this.lastCoupon=true
			}
			this.num =  index
			this.thirdDescArr=this.swiperArr[index].thirdDesc.split('；')
		},
		copy(item) {
				var me=this		
			var clipboard = new Clipboard('.btns');
			if(me.copyState){
				me.copyState=false
					clipboard.on('success', e => {
					Toast({
						message: "复制成功",
						duration: 800
					});		
				
					clipboard.destroy();	
					
						if(item.thirdType=='url'){
								location.href=item.thirdDesc
						}
					setTimeout(function(){
						me.copyState=true					
					},1000)
			
			});
			}
		
			clipboard.on('error', function(e) {
				Toast({
					message: "复制失败，请重新操作",
					duration: 800
				});
			});
				
		},
		hiddenShareInfo() {
			this.shareInfo1 = false
		},
		getJsBarcode () {
			return  import(/* webpackChunkName: "JsBarcode" */ 'jsbarcode').then((JsBarc) => {
							JsBarcode = JsBarc;
						}).catch( (err) => `JsBarcode - ${err}`)
		}

	},
	mounted: function() {
		// console.log(this.JsBarcode)
		let me = this
		LuckyCard.case({
			coverImg:pic1,
			ratio: 0.01,
			callback: function() {			
				this.clearCover();
				document.getElementsByTagName("canvas")[0].style.display = 'none'
				setTimeout(function() {
					getData.ejectThird({
						method: 'post',
						data: {
							couNo: me.$route.query.couNo,
							couponId: me.$route.query.couponId,
							mchtId: me.$route.query.mchtId,
							usrId: me.userInfo.usrId
						}
					}).then(function(rep) {
						me.usrAmt = rep.content.usrAmt
						if(me.usrAmt > 0) {
							me.shareInfo1 = true
						}
					})
				}, 100)

			}
		});
		LuckyCard.case({
			coverImg:pic2,
			ratio: 0.01,
			callback: function() {
				
				this.clearCover();

				document.getElementsByTagName("canvas")[1].style.display = 'none'
			}
		});
		
	},
	filters:{
		shiwei:value => {
			if((value+ "").length >= 20){
				return value.slice(0,10) + '...' + value.slice(-10)
			}else{
				return value
			}
			
		}
	},
	beforeRouteEnter(to, from, next) {
		if(from.path == '/getThirdDesc') {
			window.history.go(-1)
		} else {
			next()
		}
	}
}</script>

<style scoped="scoped">.banner {
	background: url('../../images/RedeemCode.jpg') no-repeat left top;
	background-size: cover;
	height: 12rem;
}
 .displayState{
 	display: none;
 }
 .swiperCode{
 	width: 1000%;
 	overflow-x: scroll;
  overflow-y: hidden;
 }
#ss,#sss{
		/*overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;*/
}
.aaaa{
	position: relative;
	top: -7rem;
}
.content {
	width: 92%;
	height: 10rem;
	background: white;
	margin: -1rem auto;
	border-radius: .4rem;
}

.couponMess {
	padding: 1rem;
}

.couponMess p:nth-of-type(1) {
	margin-bottom: .5rem;
}

.couponMess p {
	text-indent: 1rem;
}

.coupon {
	padding: 1rem;
}

img {
	width: 100%;
	position: relative;
	top: 0rem;
}

.code {
	width: 100%;
	min-height: 15rem;
	background: white;
	/*margin: -1rem auto;*/
	overflow: hidden;
	padding-top: 1rem;
	float: left;
}

#card {
	margin-left: 1rem;
}

#scratch {
	height: 4rem;
	background: gainsboro;
	border-radius: 4rem;
	width: 90%;
	margin: 1rem auto 3rem;
	position: relative;
}

#scratch div:nth-of-type(1) {
	float: left;
	width: 70%;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	font-size: 1.3rem;
	text-align: center;
	-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

#scratch .btns {
	float: right;
	width: 22%;
	height: 3rem;
	background: #ec4e8a;
	margin-right: 1rem;
	border-radius: 3rem;
	margin-top: .5rem;
	text-align: center;
	line-height: 3rem;
	color: #F0F0F0;
}

.useGuize {
	padding: 1rem;
	background: #ffffff;
}

.useGuize div:nth-of-type(2) {
	width: 100%;
	margin-top: 1rem;
	word-break:break-all;
}

.fuzhiTxt {
	height: 1rem;
	float: left;
	margin-top: 1rem;
}
.qrcode1{
	position: absolute;
	right:3rem;
	top: 17.3rem;
}
.goBack{
	
  z-index: 30;
  position: absolute;
  left: 0;
  top: 0rem;
  width: 50px;
  height: 50px;

}
.model{ 	
	min-height: 10rem;
	width: 90%;
	background: #ffffff;
	border-radius: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .modalTxt{	
  	height: 2rem;
  	line-height: 2rem;
  	text-align: center;
  	width: 100%;
  }
  .modalUl{
  	width: 100%;
  	padding:1rem 2rem;
  	min-height: 6rem;
  	word-break:break-all;
  }
  .modalBtn{
  	background: #ee5088;
  	color:#FFFFFF ;
  	text-align: center;
  	line-height: 2.5rem;
  	height: 2.5rem;
  	width: 100%;
  	border-bottom-left-radius: 1rem;
  	border-bottom-right-radius: 1rem;
  }
</style>
<style>
.ballot_result {
  width: 90%;
  margin: auto;
  height: 16rem;
  /*line-height: 18rem;*/
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin-top: 50%;
  text-align: center;
}
#ss{
	position: absolute;
	z-index: -1000;
	opacity: 0;
}
#sss{
	position: absolute;
	z-index: -1000;
	opacity: 0;
}
#ssss{
	position: absolute;
	z-index: -1000;
	opacity: 0;
}
</style>
